<template>
  <div class="maxBox">
    <div class="container">
      <el-button @click="backCome">返回</el-button>
      <div class="content">
        <div class="middle">
          <form>
            <div class="form-username">
              <input required class="username" v-model="formData.inputUser" type="text" />
              <span class="bar"></span>
              <label>用户名</label>
            </div>
            <div class="form-password">
              <input
                required
                class="password"
                @keydown.enter="handleEnter"
                v-model="formData.inputPassword"
                type="password"
              />
              <span class="bar"></span>
              <label>密码</label>
            </div>
            <div class="btn">
              <p>没有账号？<span>点击注册</span></p>
              <ButtonAssembly msg="登录" @control="submit"></ButtonAssembly>
            </div>
          </form>
        </div>
        <label class="Welcome"><b>Welcome to You</b></label>
      </div>

      <!-- 星空背景 -->
      <div class="bubbles1"></div>
      <div class="bubbles2"></div>
      <div class="bubbles3"></div>
      <div class="bubbles4"></div>
      <div class="bubbles5"></div>
    </div>
  </div>
</template>

<script setup>
import ButtonAssembly from '../components/ButtonAssembly.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import {
  hasNonEmptyValue,
  showMessageAndCallback,
  handleSuccess,
  handleError
} from '../js/utils.js'
const router = useRouter()
const backCome = () => {
  router.go(-1)
}

const formData = ref({
  inputUser: '',
  inputPassword: ''
})

function submit() {
  const user = {
    username: formData.value.inputUser,
    password: formData.value.inputPassword
  }

  const handle = () => {
    const res = JSON.stringify(user)
    localStorage.setItem('user', res)
    router.push('/')
  }

  handleData(user, '登录成功', 'success', 2000, handle, () => {})
}

function handleEnter() {
  submit()
}

function handleData(datas, message, type, duration = 1000, onSuccess, onError) {
  if (hasNonEmptyValue(datas)) {
    showMessageAndCallback(message, type, duration, handleSuccess(onSuccess))
  } else {
    handleError(onError)
  }
}
</script>

<style scoped lang="scss">
$border: 10px;
@mixin flexd($name) {
  align-items: $name;
  justify-content: $name;
  display: flex;
  @content;
}

.maxBox {
  // background-image: linear-gradient(45deg, rgb(91, 91, 96), rgb(107, 199, 207));
  background: #111;
  @include flexd(center) {
    width: 100%;
    min-height: 100vh;
  }

  @function getShadows($n) {
    $shadows: '#{random(100)}vw #{random(100)}vh #fff';
    @for $i from 2 through $n {
      $shadows: '#{$shadows},#{random(100)}vw #{random(100)}vh #fff';
    }
    @return unquote($shadows);
  }

  $duration: 400s;
  $count: 1000;
  @for $i from 1 through 5 {
    $duration: calc($duration / 2);
    $count: floor(calc($count / 2));
    .bubbles#{$i} {
      $size: #{$i}px;
      position: fixed;
      width: $size;
      height: $size;
      border-radius: 50%;
      top: 0;
      left: 0;
      box-shadow: getShadows($count);
      animation: moveUp $duration linear infinite;
      z-index: -3;

      &::after {
        content: '';
        position: fixed;
        top: 100vh;
        left: 0;
        border-radius: inherit;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
      }
    }
  }

  @keyframes moveUp {
    to {
      transform: translateY(-100vh);
    }
  }

  .container {
    background: rgb(228, 228, 236);
    margin: 0 auto;
    width: 880px;
    height: 480px;
    z-index: 0;
    position: relative;
    overflow: hidden;
    border-radius: $border;

    .content {
      @include flexd(center);
      width: 60%;
      height: calc(100% - 7px);
      background: white;
      border-radius: 6px;
      position: absolute;
      right: 3px;
      top: 3px;

      label.Welcome {
        position: absolute;
        top: 9px;
        font-size: 22px;
        color: #02eded;
      }

      .middle {
        width: 52%;
        min-height: 300px;
        @mixin width($width, $height) {
          width: $width;
          height: $height;
          @content;
        }

        @mixin spanWidth($left, $bottom) {
          width: 100%;
          height: 1px;
          position: absolute;
          border-bottom: 1px solid #02eded;
          bottom: $bottom;
          left: $left;
          @content;
        }

        @mixin labelValue($width, $left, $bottom) {
          width: $width;
          font-size: 20px;
          position: absolute;
          left: $left;
          bottom: $bottom;
          color: #5264;
          transition: transform 0.8s ease;
          @content;
        }

        .btn {
          display: flex;
          margin-top: 1rem;
          float: right;

          p,
          span {
            min-width: 200px;
            margin-top: 1rem;
            margin-right: 1rem;
            font-size: 18px;
            font-family: '宋体';
          }
          span {
            color: red;
            &:hover {
              cursor: pointer;
            }
          }
        }

        .form-username {
          @include width(100%, 30px) {
            position: relative;
            padding: 3px;
          }

          span.bar {
            @include spanWidth(-4px, 0);
          }

          label {
            @include labelValue(60px, 2px, 0);
          }

          input.username {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;

            &:valid ~ label,
            &:focus ~ label {
              color: #5264ae;
              transform: translateY(-40px);
              font-size: 16px;
            }
          }
        }

        .form-password {
          @include width(100%, 30px) {
            position: relative;
            margin-top: 5rem;
            padding: 3px;
          }

          input.password {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;

            &:valid ~ label,
            &:focus ~ label {
              color: #5264ae;
              transform: translateY(-40px);
              font-size: 16px;
            }
          }

          span.bar {
            @include spanWidth(-4px, 0);
          }

          label {
            @include labelValue(40px, 2px, 4px);
          }
        }
      }
    }
  }
}

.container::before {
  content: '';
  width: 300%;
  height: 300%;
  position: absolute;
  // background: #333;
  background-image: conic-gradient(#eeeeee22, #f79c19, #cca9fd, #02eded, #f0c237, #eeeeee22 30%);
  z-index: -2;
  animation: rotate 5s linear infinite;
  top: -100%;
  left: -100%;
  filter: blur(20px);
}

.container::after {
  content: '';
  inset: 1vmin;
  position: absolute;
  z-index: -1;
  // background: rgb(228, 228, 236);
  background: url('../../public/纳西妲.png') no-repeat;
  border-radius: $border;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>
